"use client"
import {useState} from "react"
import { Check, ChevronsUpDown } from "lucide-react"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { cn } from "@/lib/utils"
import { Button } from "@/components/ui/button"
import {
  Command,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
} from "@/components/ui/command"
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover"
interface Props {
  value: ValInter | undefined
  onChange: (value: ValInter) => void
}
interface Province {
  id: number
  name: string
}
interface City {
  id: number
  pid: number
  name: string
}
interface District {
  id: number
  pid: number
  name: string
}
export interface ValInter {
  province: Province
  city: City
  district: District
}
const provinces: Province[] = [
  {"id": 1,  "name": "广东省"},
  {"id": 2,  "name": "浙江省"},
]
const cities = [
  {"id": 1,  "pid": 1, "name": "广州市"},
  {"id": 2,  "pid": 1, "name": "深圳市"},
  {"id": 3,  "pid": 2, "name": "杭州市"},
  {"id": 4,  "pid": 2, "name": "宁波市"},
]
const districts = [
  { "id": 1, "pid": 1, "name": "越秀区" },
  { "id": 2, "pid": 1, "name": "荔湾区" },
  { "id": 3, "pid": 1, "name": "海珠区" },
  { "id": 4, "pid": 2, "name": "福田区" },
  { "id": 5, "pid": 2, "name": "罗湖区" },
  { "id": 6, "pid": 2, "name": "南山区" },
  { "id": 7, "pid": 3, "name": "上城区" },
  { "id": 8, "pid": 3, "name": "拱墅区" },
  { "id": 9, "pid": 3, "name": "西湖区" },
  { "id": 10, "pid": 4, "name": "海曙区" },
  { "id": 11, "pid": 4, "name": "江北区" },
  { "id": 12, "pid": 4, "name": "北仑区" }
]

export default function ComboboxDemo({value, onChange}: Props) {
  const [open, setOpen] = useState(false)
  const [province, setProvince] = useState<Province>()
  const [city, setCity] = useState<City>()
  const [district, setDistrict] = useState<District>()
  const [curTab, setCurTab] = useState("province")
  return (
    <Popover open={open} onOpenChange={setOpen}>
      <PopoverTrigger asChild>
        <Button
          variant="outline"
          role="combobox"
          aria-expanded={open}
          className="w-[300px] justify-between"
        >
          {value? value?.province?.name + ' ' + value?.city?.name + ' ' + value?.district?.name : '请选择'}
          <ChevronsUpDown className="opacity-50" />
        </Button>
      </PopoverTrigger>
      <PopoverContent className="w-[300px] p-0">
        <Tabs onValueChange={setCurTab} value={curTab}>
          <TabsList>
            <TabsTrigger value="province">省份</TabsTrigger>
            <TabsTrigger disabled={!province} value="city">城市</TabsTrigger>
            <TabsTrigger disabled={!city} value="district">区域</TabsTrigger>
          </TabsList>
          <TabsContent value="province">
            <Command>
              <CommandInput placeholder="Search provinces..." className="h-9" />
              <CommandList>
                <CommandEmpty>No provinces found.</CommandEmpty>
                <CommandGroup>
                  {provinces.map((item) => (
                    <CommandItem
                      key={item.id}
                      value={item.name} //注意这里必须使用name，因为search通过value来匹配
                      onSelect={() => {
                        setProvince(item)
                        setCurTab("city")
                        setCity(undefined)
                        setDistrict(undefined)
                      }}
                    >
                      {item.name}
                      <Check
                        className={cn("ml-auto", province?.name === item.name ? "opacity-100" : "opacity-0")}
                      />
                    </CommandItem>
                  ))}
                </CommandGroup>
              </CommandList>
            </Command>
          </TabsContent>
          <TabsContent value="city">
            <Command>
              <CommandInput placeholder="Search provinces..." className="h-9" />
              <CommandList>
                <CommandEmpty>No cities found.</CommandEmpty>
                <CommandGroup>
                  {cities.filter((item) => item.pid === province?.id).map((item) => (
                    <CommandItem
                      key={item.id}
                      value={item.name} //注意这里必须使用name，因为search通过value来匹配
                      onSelect={() => {
                        setCity(item)
                        setDistrict(undefined)
                        setCurTab("district")
                      }}
                    >
                      {item.name}
                      <Check
                        className={cn("ml-auto", city?.name === item.name ? "opacity-100" : "opacity-0")}
                      />
                    </CommandItem>
                  ))}
                </CommandGroup>
              </CommandList>
            </Command>
          </TabsContent>
          <TabsContent value="district">
            <Command>
              <CommandInput placeholder="Search provinces..." className="h-9" />
              <CommandList>
                <CommandEmpty>No provinces found.</CommandEmpty>
                <CommandGroup>
                  {districts.filter((item) => item.pid === city?.id).map((item) => (
                    <CommandItem
                      key={item.id}
                      value={item.name} //注意这里必须使用name，因为search通过value来匹配
                      onSelect={() => {
                        setDistrict(item)
                        if(province && city){
                          onChange({province: province, city: city, district: item})
                        }
                        setOpen(false)
                      }}
                    >
                      {item.name}
                      <Check
                        className={cn("ml-auto", district?.name === item.name ? "opacity-100" : "opacity-0")}
                      />
                    </CommandItem>
                  ))}
                </CommandGroup>
              </CommandList>
            </Command>
          </TabsContent>
        </Tabs>
      </PopoverContent>
    </Popover>
  )
}